<template>
  <a-modal
    title="查询居民信息"
    width="80%"
    :visible="ownerVisible"
    :confirm-loading="ownerConfirmLoading"
    :closable="false"
    @ok="ownerHandleOk"
    @cancel="ownerHandleCancel"
  >
    <div :class="advanced ? 'search' : null">
      <!-- 搜索区域 -->
      <a-form layout="horizontal">
        <div :class="advanced ? null: 'fold'">
          <a-row >
            <a-col :md="12" :sm="24" >
              <a-form-item
                :label="`${searchType}姓名`"
                :labelCol="{span: 7}"
                :wrapperCol="{span: 16, offset: 1}">
                <a-input v-model="ownerQueryParams.rsName"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24" >
              <a-form-item
                label="身份证号"
                :labelCol="{span: 5}"
                :wrapperCol="{span: 18, offset: 1}">
                <a-input v-model="ownerQueryParams.cardId"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24" >
              <a-form-item
                label="联系方式"
                :labelCol="{span: 5}"
                :wrapperCol="{span: 18, offset: 1}">
                <a-input v-model="ownerQueryParams.mobile"/>
              </a-form-item>
            </a-col>
          </a-row>
        </div>
        <span style="float: right; margin-top: 3px;">
          <a-button type="primary" @click="searchOwner">查询</a-button>
          <a-button style="margin-left: 8px" @click="resetOwner">重置</a-button>
        </span>
      </a-form>
    </div>
    <div>
      <!-- 表格区域 -->
      <a-table ref="OwnerTableInfo"
               rowKey="rsName"
               :columns="ownerColumns"
               :dataSource="ownerDataSource"
               :pagination="ownerPagination"
               :loading="ownerloading"
               :rowSelection="{selectedRowKeys: selectedRsRowKeys, onChange: onSelectChange}"
               @change="handleOwnerTableChange" :scroll="{ x: 1500 }">
        <template v-if="text" slot="icon" slot-scope="text, record">
          <a-icon :type="text" />
        </template>
      </a-table>
    </div>
  </a-modal>
</template>
<script>
export default {
  name: 'RsSearch',
  props: {
    ownerVisible: {
      default: false
    },
    searchType: {
      default: ''
    }
  },
  data () {
    return {
      advanced: false,
      form: this.$form.createForm(this),
      key: +new Date(),
      ownerConfirmLoading: false,
      ownerQueryParams: [],
      ownerPaginationInfo: null,
      ownerPagination: {
          pageSizeOptions: ['10', '20', '30', '40', '100'],
          defaultCurrent: 1,
          defaultPageSize: 10,
          showQuickJumper: true,
          showSizeChanger: true,
          showTotal: (total, range) => `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`
      },
      ownerloading: false,
      ownerDataSource: [],
      selectedRsRowKeys: []
    }
  },
  computed: {
    ownerColumns () {
        return [{
            title: '姓名',
            dataIndex: 'rsName'
        }, {
            title: '身份证号',
            dataIndex: 'cardId'
        }, {
            title: '性别',
            dataIndex: 'SSEX'
        }, {
            title: '民族',
            dataIndex: 'NATION'
        }, {
            title: '联系方式',
            dataIndex: 'MOBILE'
        }]
    }
  },
  methods: {
    ownerHandleOk (e) {
      // this.ownerConfirmLoading = true
      this.resetOwner()
      let retData = {}
      this.ownerDataSource.forEach(_key => { if (_key.rsName === this.selectedRsRowKeys[0]) { retData = _key } })
      this.$emit('success', retData, this.searchType)
    },
    ownerHandleCancel (e) {
      this.resetOwner()
      this.$emit('close')
    },
    searchOwner () {
      this.rsFetch({
          ...this.ownerQueryParams
      })
    },
    resetOwner () {
      // 重置分页
      this.$refs.OwnerTableInfo.pagination.current = this.ownerPagination.defaultCurrent
      if (this.ownerPaginationInfo) {
          this.ownerPaginationInfo.current = this.ownerPagination.defaultCurrent
          this.ownerPaginationInfo.pageSize = this.ownerPagination.defaultPageSize
      }
      // 重置查询参数
      this.ownerQueryParams = {}
      this.ownerloading = false
      this.form.resetFields()
    },
    handleOwnerTableChange (pagination) {
        // 将这两个参数赋值给Vue data，用于后续使用
        this.ownerPaginationInfo = pagination
        this.rsFetch({
            ...this.ownerQueryParams
        })
    },
    rsFetch (params = {}) {
        if (this.ownerPaginationInfo) {
            // 如果分页信息不为空，则设置表格当前第几页，每页条数，并设置查询分页参数
            this.$refs.OwnerTableInfo.pagination.current = this.ownerPaginationInfo.current
            this.$refs.OwnerTableInfo.pagination.pageSize = this.ownerPaginationInfo.pageSize
            params.pageSize = this.ownerPaginationInfo.pageSize
            params.pageNum = this.ownerPaginationInfo.current
        } else {
            // 如果分页信息为空，则设置为默认值
            params.pageSize = this.ownerPagination.defaultPageSize
            params.pageNum = this.ownerPagination.defaultCurrent
        }

        this.ownerloading = true
        this.$get('tResident', {
            ...params
        }).then((r) => {
            let data = r.data
            const pagination = { ...this.ownerPagination }
            pagination.total = data.total
            this.ownerDataSource = data.rows
            this.ownerPagination = pagination
            this.ownerloading = false
        })
    },
    onSelectChange (selectedRowKeys) {
        this.selectedRsRowKeys = selectedRowKeys
    }
  },
  watch: {
    ownerVisible () {
      if (this.ownerVisible) {
        this.selectedRsRowKeys = []
          this.rsFetch({
              ...this.ownerQueryParams
          })
      }
    }
  }
}
</script>
<style lang="less" scoped>
  @import "../../../../static/less/Common";
</style>
